// ---------------  创建剪裁区 --------------------------------
// - 找到剪裁区的图片 （img#image）
var $image = $('#image');
// - 设置配置项
var option = {
  // 纵横比(宽高比)
  aspectRatio: 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$image.cropper(option);



// ---------------  点击 上传 按钮，能够选择图片 ------------------
$('button:contains("上传")').on('click', function () {
  // 触发文件域的单击事件
  $('#file').trigger('click');
});



// ---------------  当文件域的内容改变了，更换剪裁区的图片 ------------------
$('#file').on('change', function () {
  // console.log(111)
  // console.dir(this);
  // 判断，如果选择了图片
  if (this.files.length > 0) {
    // 为选择的图片生成临时的url
    // 1. 找到文件对象
    let fileObj = this.files[0];
    // 2. 创建url
    let url = URL.createObjectURL(fileObj);
    // console.log(url);
    // 更换剪裁区的图片（销毁剪裁框 -> 更换图片 -> 重新创建剪裁框）
    $image.cropper('destroy').attr('src', url).cropper(option);
  }
});



// ---------------  点击 确定 按钮的时候，剪裁图片，更换头像 ------------------
$('button:contains("确定")').on('click', function () {
  // 剪裁图片
  let canvas = $image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  // 把 canvas 转换成接口要求的 base64 格式
  let base64 = canvas.toDataURL('image/jpeg', 0.5);
  // console.log(base64);
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: base64 },
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        window.parent.getUserInfo();
      }
    }
  });
});